Ext.define('Triends.view.OtherTinglist', {
	extend: 'Ext.Panel',
	id: 'othertinglist',
	xtype: 'othertinglist',
	config: {
		layout: 'vbox',
		items: [
			{
				xtype: 'panel',
		    	style: {'margin':'10px'} ,
		    	html: "<p style='margin-left:10px'><font size='4'><b>Hosting</b></font></p>"
			},
			{
				xtype: 'panel',
				style: {'margin':'10px'},
				items: [{
						xtype: 'list',
						id: 'otherhosttingview',
						pressedCls: "x-item-selected1",
						selectedCls: "",
						pressedDelay: 50,
						minHeight: 70,
						scrollable: false,
						itemTpl:"<table width='100%'>"+
										"<tr>" +
											"<td rowspan='2' align='center' valign='center' width=50 style='word-break:break-all'><img src='resource/images/{THEME}.png' width='48px' height='48px'></td>" +
											"<td valign='center'><p class='tingellipsis' style='margin-left:20px;word-break:break-all'><font size='3'><b>{TITLE}</b></font></p></td>" +
											"<td width=40 style='margin-bottom:-10px'><img src='resource/images/wifi{Wifi}.png' width='40px' height='40px'></td>"+
											"<td rowspan='2' align='center' width=30><font size='2'>{Total}%</font></td>"+
										 "</tr>" +
										"<tr>" +
											"<td valign='center'><p style='margin-left:20px'><font size='2'>{AMPMDATE}</font></p></td>" +
											"<td align='center' width=40 style='padding-top:-10px'>T-fi</td>"+
										"</tr>"+
									"</table>",
			//			useComponents: true,
			//			defaultType: 'UserTingItem',
						listeners: {
							itemtap: function(dataview, index, target, model, e, eOpts) {
								var tingnum = model.data.NUMBER;
								openTinginfo(model, tingnum)
							}
						}		
					}]
			},
			{
				xtype: 'panel',
		    	style: {'margin':'10px'} ,
		    	html: "<p style='margin-left:10px'><font size='4'><b>Attending</b></font></p>"
			},
			{
				xtype: 'panel',
				style: {'margin':'10px'},
				items: [{
					xtype: 'list',
					id: 'otherattendtingview',
					pressedCls: "x-item-selected",
					selectedCls: "",
					pressedDelay: 50,
					minHeight: 70,
					scrollable: false,
					itemTpl:"<table width='100%'>"+
								"<tr>" +
									"<td rowspan='2' align='center' valign='center' width=50 style='word-break:break-all'><img src='resource/images/{THEME}.png' width='48px' height='48px'></td>" +
									"<td valign='center'><p class='tingellipsis' style='margin-left:20px;word-break:break-all'><font size='3'><b>{TITLE}</b></font></p></td>" +
									"<td width=40 style='margin-bottom:-10px'><img src='resource/images/wifi{Wifi}.png' width='40px' height='40px'></td>"+
									"<td rowspan='2' align='center' width=30>{Total}%</td>"+
								 "</tr>" +
								"<tr>" +
									"<td valign='center'><p style='margin-left:20px'><font size='2'>{AMPMDATE}</font></p></td>" +
									"<td align='center' width=40 style='padding-top:-10px'>T-fi</td>"+
								"</tr>"+
							"</table>",
		//			useComponents: true,
		//			defaultType: 'UserTingItem',
					listeners:{
						itemtap: function(dataview, index, target, model, e, eOpts) {
							var tingnum = model.data.NUMBER;
							openTinginfo(model, tingnum);					
						}
					}	
				}]
		}]
	}
});
	
//Ext.define('OtherTingItem', {
//	extend: 'Ext.dataview.component.DataItem',
//    xtype: 'UserTingItem',
//	config: {
//		items: [{
//			xtype: 'panel',
//			tpl: '{TITLE}<br>{STARTDATE} {STARTTIME}'
//		}]
//    }
//});